<!-- 目录模板样式 -->
<template>
  <div>
    <div v-for="(x, index) in data" :key="index" style="page-break-after: always">
      <el-table :data="tableData[index]" style="width: 100%" border class="margin10Top">
        <el-table-column type="index" width="50" label="序号"> </el-table-column>
        <el-table-column
          v-for="item of title"
          :key="item.templateFieldId"
          :prop="toCamelCase(item.fieldName)"
          :label="item.fieldTitle"
          :width="getDictWidth(item.fieldName)"
        >
          <template slot-scope="{ row }">
            <div>
              <span v-show="IsShowDictItemLabel(item.fieldName)">
                {{ getValueLabel(item.fieldName, row[toCamelCase(item.fieldName)]) }}
              </span>

              <span v-show="!IsShowDictItemLabel(item.fieldName)">
                {{ row[toCamelCase(item.fieldName)] }}
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { pageByBoxNo } from '@/api/rfid/label'
import toCamelCase from '@/utils/toCamelCase.js'
import { getDictItemsByCodes } from '@/api/sys/dict'

export default {
  name: 'CatalogStyle',
  components: {},
  props: {
    title: {
      type: Array,
      default: () => {
        return []
      },
    },
    data: {
      type: Array,
      default: () => {
        return [{}]
      },
    },
  },
  data() {
    return {
      tableData: [],
      dictOption: {},
    }
  },
  computed: {
    // 根据字段名获取字典宽度
    getDictWidth() {
      return function (str) {
        switch (str) {
          case 'page_no':
            return '50'
          case 'annual':
            return '60'
          case 'store_status':
            return '80'
          case 'stage_status':
            return '80'
        }
      }
    },
    toCamelCase() {
      return function (str) {
        return toCamelCase(str)
      }
    },
    getValueLabel() {
      return function (field, val) {
        let foundLabel = this.dictOption[field]?.find((item) => item.value == val)?.label
        return foundLabel
      }
    },
    IsShowDictItemLabel() {
      return function (val) {
        let nonEmptyKeys = Object.keys(this.dictOption).filter(
          (key) => Array.isArray(this.dictOption[key]) && this.dictOption[key].length > 0
        )

        // 判断nonEmptyKeys中是否有val
        let hasMatch = nonEmptyKeys.includes(val)

        return hasMatch
      }
    },
  },
  watch: {
    title(newVal) {
      if (newVal.length > 0) {
        let dict = []
        this.data.map((item, index) => {
          this.loadData(item.boxNo, index)
        })
        this.title.map((x) => {
          dict.push(x.fieldName)
        })
        this.getDictItemsByCode(dict)
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 根据字典编码来获取字典数据
    getDictItemsByCode(dictCode) {
      getDictItemsByCodes(dictCode).then((res) => {
        if (res.data.code === 200) {
          this.dictOption = res.data.data
        } else {
          this.$message.warning(res.data.message)
        }
      })
    },
    async loadData(params, index) {
      await pageByBoxNo({ boxNo: params, pageNo: 1, pageSize: 99 })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData[index] = res.data.data.records

            this.$set(this.tableData, index, res.data.data.records)
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
  },
}
</script>
<style lang="less" scoped></style>
